<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>FoldingList - Unicorn Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../yui/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../assets/testlogger.css" />
<script type="text/javascript" src="../yui-base.source.js"></script>
<script type="text/javascript" src="../yui/logger/logger.js"></script>
<script type="text/javascript" src="../yui/yuitest/yuitest.js"></script>

<script type="text/javascript" src="../build/core/Unicorn.source.js"></script>
<script type="text/javascript" src="../build/core/lang.source.js"></script>

<script type="text/javascript" src="../build/util/util.source.js"></script>
<script type="text/javascript" src="../build/util/Dom.source.js"></script>
<script type="text/javascript" src="../build/util/Event.source.js"></script>
<script type="text/javascript" src="../build/util/Effect.source.js"></script>

<script type="text/javascript" src="../build/widget/WidgetHelper.source.js"></script>
<script type="text/javascript" src="../build/widget/panel/Panel.source.js"></script>
<script type="text/javascript" src="../build/widget/panel/PanelList.source.js"></script>
<script type="text/javascript" src="../build/widget/panel/FoldingList.source.js"></script>

<style type="text/css">
	/* yui reset.css version: 2.5.2 */
		html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,div,div,div,div,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,div,div,div,div,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}
	 /* end of reset.css */
 	body { font-size: 13px; line-height: 130%; padding: 20px 60px }
 	a.reply-link { display: block; margin: 20px; font-size: 14px; color: blue!important; text-decoration: underline!important }
</style>
</head>

<body>

<!-- test widget.FoldingList -->
<style type="text/css">
	div, pre { margin: 0 }
	pre { color: #994D00; display: block; font-size: 12px; font-family: 'Courier New' }

	.panel { width: 700px; margin: 5px 0 }
	ul { margin-left: 20px; zoom: 1; position: relative }
	ul li { padding-left: 5px }

	#foldingList1 .panel,
	#foldingList2 .panel,
	#foldingList3 .panel { width: 90% }
	
	.hd {
		background: #E3F1FF; font-weight: bold;
		position: relative; padding: 3px 5px 3px 25px; _zoom: 1 }
	.tool {
		position: absolute; left: 5px; top: 3px;
		height: 15px; width: 15px; overflow: hidden;
		background: url('../assets/demo/tool-sprites.gif') no-repeat 0 0;
		cursor: pointer
		}
	.tool-toggle { background-position: 0 -255px }
	.tool-toggle-over { background-position: -15px -255px }
	.collapsed .tool-toggle { background-position: 0 -240px }
	.collapsed .tool-toggle-over { background-position: -15px -240px }
	
</style>

<div style="border: 1px solid #6997D1; padding: 20px; margin: 20px; width: 400px">
	<pre>
普通可折叠菜单
Unicorn.widget.FoldingList.decorate(
	'foldingList3',
	{ recursive: true, panelCls: 'panel' },
	{ collapsed: true }
);
	</pre>
	<ul id="foldingList1">
		<li class="panel">
			<div class="hd">全球购</div>
			<ul>
				<li class="panel">
					<div class="hd">List 2</div>
					<ul>
						<li class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 2.1</a></div>
							<ul>
								<li>List 2.1.1</li>
								<li>List 2.1.2</li>
								<li>List 2.1.3</li>
							</ul>
						</li>
						<li>List 2.2</li>
						<li>List 2.3</li>
						<li>List 2.4</li>
					</ul>
				</li>
				<li class="panel">
					<div class="hd">List 3</div>
					<ul>
						<li>List 3.1</li>
						<li  class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 3.2</a></div>
							<ul>
								<li>List 3.2.1</li>
								<li>List 3.2.2</li>
								<li>List 3.2.3</li>
								<li>List 3.2.4</li>
							</ul>
						</li>					
						<li>List 3.3</li>
						<li>List 3.4</li>
					</ul>
				</li>
				<li class="panel">
					<div class="hd">List 4</div>
					<ul>
						<li>List 4.1</li>
						<li>List 4.2</li>
						<li>List 4.3</li>
						<li>List 4.4</li>
					</ul>
				</li>
			</ul>
			
		</li>

		<li class="panel">
			<div class="hd">美人时尚</div>
			<ul>
				<li class="panel">
					<div class="hd">List 1</div>
					<ul>
						<li>List 1.1</li>
						<li>List 1.2</li>
						<li>List 1.3</li>
						<li>List 1.4</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</div>

<div style="border: 1px solid #6997D1; padding: 20px; margin: 20px; width: 400px">
	<pre>
手风琴效果
Unicorn.widget.FoldingList.decorate(
	'foldingList2',
	{ recursive: true, 
	  panelCls: 'panel',
	  multiExpand: false
	},
	{ collapsed: true, titleCollapse: true }
);
	</pre>
	<ul id="foldingList2">	
		<li class="panel">
			<div class="hd">美人时尚</div>
			<ul>
				<li class="panel">
					<div class="hd">List 1</div>
					<ul>
						<li>List 1.1</li>
						<li>List 1.2</li>
						<li>List 1.3</li>
						<li>List 1.4</li>
					</ul>
				</li>
			</ul>
		</li>
				
		<li class="panel">
			<div class="hd">全球购</div>
			<ul>
				<li class="panel">
					<div class="hd">List 2</div>
					<ul>
						<li class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 2.1</a></div>
							<ul>
								<li>List 2.1.1</li>
								<li>List 2.1.2</li>
								<li>List 2.1.3</li>
							</ul>
						</li>
						<li>List 2.2</li>
						<li>List 2.3</li>
						<li>List 2.4</li>
					</ul>
				</li>
				<li class="panel">
					<div class="hd">List 3</div>
					<ul>
						<li>List 3.1</li>
						<li  class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 3.2</a></div>
							<ul>
								<li>List 3.2.1</li>
								<li>List 3.2.2</li>
								<li>List 3.2.3</li>
								<li>List 3.2.4</li>
							</ul>
						</li>					
						<li>List 3.3</li>
						<li>List 3.4</li>
						<li  class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 3.5</a></div>
							<ul>
								<li>List 3.5.1</li>
								<li>List 3.5.2</li>
								<li>List 3.5.3</li>
								<li>List 3.5.4</li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="panel">
					<div class="hd">List 4</div>
					<ul>
						<li>List 4.1</li>
						<li>List 4.2</li>
						<li>List 4.3</li>
						<li>List 4.4</li>
					</ul>
				</li>
			</ul>
			
		</li>
	</ul>
</div>

<div style="border: 1px solid #6997D1; padding: 20px; margin: 20px; width: 400px">
	<pre>
默认配置
Unicorn.widget.FoldingList.decorate(
	'foldingList3'
);
	</pre>
	<ul id="foldingList3">
			
		<li class="panel">
			<div class="hd">美人时尚</div>
			<ul>
				<li class="panel">
					<div class="hd">List 1</div>
					<ul>
						<li>List 1.1</li>
						<li>List 1.2</li>
						<li>List 1.3</li>
						<li>List 1.4</li>
					</ul>
				</li>
			</ul>
		</li>
				
		<li class="panel">
			<div class="hd">全球购</div>
			<ul>
				<li class="panel">
					<div class="hd">List 2</div>
					<ul>
						<li class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 2.1</a></div>
							<ul>
								<li>List 2.1.1</li>
								<li>List 2.1.2</li>
								<li>List 2.1.3</li>
							</ul>
						</li>
						<li>List 2.2</li>
						<li>List 2.3</li>
						<li>List 2.4</li>
					</ul>
				</li>
				<li class="panel">
					<div class="hd">List 3</div>
					<ul>
						<li>List 3.1</li>
						<li  class="panel">
							<div class="hd"><a href="javascript:alert(1);">List 3.2</a></div>
							<ul>
								<li>List 3.2.1</li>
								<li>List 3.2.2</li>
								<li>List 3.2.3</li>
								<li>List 3.2.4</li>
							</ul>
						</li>					
						<li>List 3.3</li>
						<li>List 3.4</li>
					</ul>
				</li>
				<li class="panel">
					<div class="hd">List 4</div>
					<ul>
						<li>List 4.1</li>
						<li>List 4.2</li>
						<li>List 4.3</li>
						<li>List 4.4</li>
					</ul>
				</li>
			</ul>
			
		</li>

	</ul>
</div>

<script type="text/javascript">	
(function() {
	
	var Assert = YAHOO.util.Assert,
		ObjectAssert = YAHOO.util.ObjectAssert,
		ArrayAssert = YAHOO.util.ArrayAssert;
	var D = Unicorn.util.Dom,
		E = Unicorn.util.Event;
	
	var testCase = new YAHOO.tool.TestCase({
		//name of the test case
		name: "Unicorn TestCase",
		
		test_widget_PanelList: function() {
			YAHOO.log('开始 test_widget_FoldingList', 'case', 'testCase');
			YAHOO.log(' - 请手动测试效果是否正常', 'wait', 'testCase');
			
			//Unicorn.util.Anim = null;
			Unicorn.widget.FoldingList.decorate('foldingList1', { recursive: true, panelCls: 'panel' }, { collapsed: true });
			
			Unicorn.widget.FoldingList.decorate('foldingList2', { recursive: true, panelCls: 'panel', multiExpand: false }, { collapsed: true, titleCollapse: true });
			
			Unicorn.widget.FoldingList.decorate('foldingList3');
			
			YAHOO.log('结束 test_widget_FoldingList', 'case', 'testCase');
		} 
	});
	
	var suite = new YAHOO.tool.TestSuite("testSuite");
	suite.add(testCase);
	
	YAHOO.util.Event.onDOMReady(function (){
		//create the logger
		var logger = new YAHOO.tool.TestLogger();
		
		//add the tests
		YAHOO.tool.TestRunner.add(suite);

		if (parent && parent != window) {
			YAHOO.tool.TestManager.load();
		} else {
			YAHOO.tool.TestRunner.run();
		}
	});
})();
</script>
</body>
</html>
